<template>
  <a-modal
    v-model:visible="props.abnormalVisible"
    @cancel="emits('update:abnormalVisible', false)"
    title="标记异常"
    @ok="handleSignAbnormal(null)"
    :width="450"
  >
    <a-form class="!p-3" :model="Data.abnormalType" name="basic" ref="formRef" :rules="rules">
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="异常类型" name="ycConfigId">
            <a-select
              v-model:value="Data.abnormalType.ycConfigId"
              placeholder="请选择异常类型"
              :options="Data.abnormalOptions"
              @change="handleChange"
              :field-names="{ label: 'ycName', value: 'autoId' }"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="异常备注" name="ycBz">
            <a-textarea v-model:value="Data.abnormalType.ycBz" placeholder="请填写异常原因" />
          </a-form-item>
        </a-col>
        <a-col :span="24" v-if="ycSource == 'CP' || !ycSource">
          <span class="text-[red]">注：异常提交后本次评阅分数无效且不会记录</span>
        </a-col>
      </a-row>
    </a-form>
    <template #footer v-if="ycSource == 'CP' || !ycSource">
      <a-button
        style="border-radius: 4px"
        type="default"
        @click="emits('update:abnormalVisible', false)"
      >
        取消
      </a-button>
      <a-button
        style="border-radius: 4px"
        :loading="Data.loading"
        type="primary"
        @click="handleSignAbnormal(false)"
      >
        标记并退出评阅
      </a-button>
      <a-button
        style="border-radius: 4px"
        :loading="Data.loading"
        type="primary"
        @click="handleSignAbnormal(true)"
      >
        标记并评阅下一题
      </a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { reactive, onMounted, computed, ref, watch } from 'vue'
import { getYcztConfigList } from '/@/api/system-manage/teacher-info'
import { pyYcSubmit } from '/@/api/teacher'

import { useMessage } from '/@/hooks/web/useMessage'
const { createMessage } = useMessage()

import { useTeacherMarkStore } from '/@/store/modules/teacherMark'
const teacherMarkStore = useTeacherMarkStore()

import { router } from '/@/router'
const props = defineProps({
  abnormalVisible: {
    type: Boolean,
    default: false,
  },
  questionsInfo: {
    type: Object,
    default: () => {},
  },
  ycSource: {
    type: String,
    default: undefined,
  },
  pyKssj: {
    type: String,
    default: undefined,
  },
  pyTjsj: {
    type: String,
    default: undefined,
  },
} as any)

watch(
  () => props.abnormalVisible,
  () => {
    Data.abnormalType = {}
    Data.loading = false
  }
)

const emits = defineEmits(['update:abnormalVisible', 'success'])

const Data = reactive({
  abnormalType: {},
  abnormalOptions: [],
  loading: false,
} as any)

// form 表单验证规则
const formRef = ref<any>()

const rules = reactive({
  ycConfigId: [{ required: true, message: '请选择异常类型', trigger: 'change' }],
  ycBz: [{ required: false, message: '请填写异常原因', trigger: 'blur' }],
})

function handleChange(_value: any, option: any) {
  rules.ycBz[0].required = option.reasonFlag
  formRef.value.clearValidate() //移除表单的校验结果
}

// 确定标记异常
const handleSignAbnormal = async e => {
  formRef.value?.validate().then(async (values: any) => {
    Data.loading = true
    let { code, message } = await pyYcSubmit({
      ...values,
      ycSource: props.ycSource, //异常来源
      pyZycId: props.questionsInfo?.pyZycId || props.questionsInfo?.pyZycIdList[0], //评阅资源池id
      stId: props.questionsInfo?.stId, //试题id
      kmdm: props.questionsInfo?.kmdm, //科目代码
      pyKssj: props.pyKssj, // 开始打分时间
      pyTjsj: props.pyTjsj, // 提交时间
      zjFlag: props.ycSource == 'ZJ', //质检动作标志，默认为false
      fpFlag: props.questionsInfo.fpFlag, //是否为复评题
    })
    if (code === 200) {
      createMessage.success('标记异常成功,可告诉评阅组长查看异常信息并审核！')
      formRef.value?.resetFields()
      e && teacherMarkStore.setNext(true) // 获取下一题
      e === false && router.go(-1) // 关闭窗口
      emits('update:abnormalVisible', false)
      emits('success')
    } else {
      createMessage.error(message)
    }
    Data.loading = false
  })
}

onMounted(async () => {
  // 获取异常类型列表
  let { code, data } = await getYcztConfigList({})
  if (code === 200) {
    Data.abnormalOptions = data || []
  }
})
</script>
